<template>
  <div class="c-paper">
    <div class="c-paper-header">
      <div class="c-paper-header__left">
        <slot name="paper-header"/>
      </div>
      <template v-if="collapse">
        <div class="c-paper-header__right" @click="isShow = !isShow">
          <span v-if="isShow">收起</span>
          <span v-else>展开</span>
          <i :class="{'el-icon-arrow-down':!isShow,'el-icon-arrow-up':isShow}"/>
        </div>
      </template>
    </div>
    <div v-show="isShow" class="c-paper-content">
      <transition name="fade">
        <slot name="paper-content"/>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Paper',
  props: {
    collapse: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isShow: this.show
    }
  }
}

</script>
<style lang="scss" scoped>
  .c-paper{
    padding: 10px;
    &-header{
      height: 45px;
      line-height: 45px;
      color: #000000;
      border-bottom: 1px solid #E9E9E9;
      display: flex;
      &__left{
        font-size: 14px;
        font-weight: bold;
        flex: 1;
      }
      &__right{
        font-size: 12px;
        width: 50px;
        cursor: pointer;
      }
    }
    &-content{
      padding: 10px;
    }
  }
</style>
